<template>
	<view class="wp">
		<view class="video">
			<!-- <live-player mode="live" :src="live_pull_url" :autoplay="true" :style="'height:'+windowHeight+'px;width:'+screenWidth+'px;'" /> -->
		</view>
		<view class="position" @click="handleTap" @touchend="handleTouchEnd">
			<like-button class="like_Button" ref="likeButton" :site="site" :high="250" imgWidth="60" imgHeight="60" :showImgs="zanIconList" :duration="2000"></like-button>
			<view class="live_top" @click.stop="returnFalse">
				<view class="flex_between live_info">
					<view class="live_left">
						<view class="live_user flex_align_center">
							<image :src="anchor.avatar"></image>
							<view class="live_name clamp">
								<view class="live_nickname">{{anchor.nickname}}</view>
								<view>{{likeNumCount}}点赞</view>
							</view>
						</view>
						<!-- <image @click="openPopup('award')" class="live_bag" src="https://img.jinghushi.com/images/0/2025/04/kwa0ckWQ2kytwSKtZSFKK4QwCTFwcz.png" mode="widthFix"></image> -->
					</view>
					<view class="live_right">
						<view class="flex_end live_rank" @click.stop="openPopup('like')">
							<view class="live_rank_avatar" v-for="(item,i) in onlineUsersData">
								<image class="live_rank_crown"
									src="https://img.jinghushi.com/images/0/2025/04/CHq5rb5aHOuNBiHv7afO55IB4xNfir.png">
								</image>
								<image :src="item.avatar"></image>
							</view>
							<view>{{count}}</view>
						</view>
						<view class="flex_end live_icon">
							<!-- <view>
								<image src="https://img.jinghushi.com/images/0/2025/04/aL7CzlgqKzGjqGpkC7j9C41lJCJQJq.png"></image>
							</view>
							<button open-type="share">
								<view>
									<image src="https://img.jinghushi.com/images/0/2025/04/vgsvU5OE5PuKvg2uHH9GkhSS59Vcme.png"></image>
								</view>
							</button> -->
							<view @click.stop="$navBack()">
								<image
									src="https://img.jinghushi.com/images/0/2025/04/i05J1FAr2Y1E5a2E12ARZyaNAe2XaI.png">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="live_bottom" @click.stop="returnFalse">
				<scroll-view scroll-y="true" class="l_b_chat" :scroll-into-view="scrollToId" @scroll="onTouchStart">
					<view class="l_chat_i" :class="{'flex_box':item.msg_type==2}" :id="'id'+item.time" v-for="(item, index) in chatList" :key="index">
						{{item.user_name}}：<text v-if="item.msg_type==1">{{item.content}}</text>
						<image v-if="item.msg_type==2" @click="prevImg(item.content)" :src="item.content"></image>
					</view>
				</scroll-view>
				<view class="l_goods_float" @click="$navTo('/pages/product/product?id='+pushGoodsData.goods_id)"
					v-if="pushGoodsData.goods_thumb">
					<view class="flex_align_center l_goods_img">
						<image :src="pushGoodsData.goods_thumb" mode="widthFix"></image>
					</view>
					<view class="clamp">{{pushGoodsData.goods_title}}</view>
					<!-- <view class="flex_between l_goods_rate">
						<view>最高补贴100%</view>
						<view>分享可挣0.351</view>
					</view> -->
					<view class="l_goods_btn">超值价 ￥{{pushGoodsData.goods_price}} 抢购</view>
					<view class="l_goods_num">{{pushGoodsData.number}}</view>
				</view>
				<view class="flex_between">
					<view class="flex_between l_b_input">
						<image src="https://img.jinghushi.com/images/0/2025/04/SCgK1D6n9cCN97OLif9DL13g1ZOIgn.png" mode="widthFix" />
						<view class="flex_align_center l_b_mute" v-if="muteStaus==1">
							<text>您已被禁言</text>
							<image src="https://img.jinghushi.com/images/0/2025/04/KarxENWg63eeq42eASrwYQXYWwn2DK.png"
								mode="widthFix"></image>
						</view>
						<view class="flex_align_center l_b_mute" v-else @click.stop="openPopup('input')">
							<text>消费享补贴 就用多米街</text>
						</view>
						<!-- <input v-else @focus="openPopup('input')" type="text" @confirm="sendData" confirm-type="send" placeholder="消费享补贴 就用多米街" v-model="msg" cursor-spacing="10px"> -->
						<!-- <image src="https://img.jinghushi.com/images/0/2025/04/ezJ1byLHpW5DDt2uBXZ1Jbb2Z3jbMm.png"/> -->
					</view>
					<view class="flex_end l_b_icon">
						<!-- <view class="l_b_icon_item" @click.stop="openPopup('gift')">
							<view class="flex_center">
								<image src="https://img.jinghushi.com/images/0/2025/04/UD8h0s8A81HGH3aaVd338Ys56u8D8I.png" mode="widthFix"/>
							</view>
							<view>礼物</view>
						</view> -->
						<view class="l_b_icon_item" @click.stop="openPopup('cart')">
							<view class="flex_center">
								<image src="https://img.jinghushi.com/images/0/2025/04/m39A6GgmaBGc6Bg9C7v695a0z1gc77.png" mode="widthFix" />
							</view>
							<view>商品</view>
						</view>
						<!-- <like-button> -->
							<view class="l_b_icon_item" @click.stop="clickThumbsUp">
								<view class="flex_center">
									<image
										src="https://img.jinghushi.com/images/0/2025/04/W9KE4449yuEY4T9H4dEP4445443h9k.png"
										mode="widthFix" />
								</view>
								<view>点赞</view>
							</view>
						<!-- </like-button> -->
					</view>
				</view>
			</view>
			<!-- 购物车列表 -->
			<uni-popup ref="cartpopup" type="bottom" :animation="true" background-color="rgba(255,255,255,.5)">
				<view class="cart_content">
					<view class="flex_between">
						<uni-search-bar v-model="cartData.title" radius="5" placeholder="搜索商品名称" clearButton="auto"
							cancelButton="none" @confirm="cartList" @clear="clearCartList" />
						<view class="my_order" @click.stop="$navTo('/pages/index/order')">
							<image src="https://img.jinghushi.com/images/0/2025/04/S8lQz28e2WZN229nh9TqVWP22n4wlT.png"
								mode="widthFix" />
							<view>订单</view>
						</view>
					</view>
					<scroll-view class="cart_list" :scroll-y="true">
						<view class="flex_between cart_item" v-for="(item,i) in cartData.liveGoodsList"
							@click.stop="$navTo('/pages/product/product?id='+item.id)">
							<view class="cart_img">
								<image :src="item.thumb" mode="widthFix"></image>
								<view class="cart_num">{{item.live_sort}}</view>
							</view>
							<view class="cart_info">
								<view class="clamp">{{item.title}}</view>
								<!-- <view class="cart_rate">最高补贴47% 分享可赚￥0.6666元</view> -->
								<view class="flex_between flex_align_end">
									<view class="cart_price"><text class="pub_small">￥</text>{{item.agentprice}}</view>
									<view class="cart_btn">
										<text class="cart_coll" :class="item.is_favorite==0?'cart_coll_ac':''"
											@click.stop="changCollectStatus(item.id,i)">收藏</text>
										<text class="cart_coll_ac">购买</text>
									</view>
								</view>
							</view>
						</view>
						<view class="empty_loading" v-if="cartData.liveGoodsList.length==0">没有商品</view>
					</scroll-view>
				</view>
			</uni-popup>
			<!-- 礼物列表 -->
			<uni-popup ref="giftpopup" type="bottom" :animation="true" background-color="#808080">
				<view class="gift_content">
					<view class="flex_between gift_top">
						<view class="gift_tit flex_align_center">
							<image
								src="https://img.jinghushi.com/images/0/2025/04/bD858IzIN404Giv0KD48F7FN0piANh.png" />
							<view>礼物</view>
						</view>
						<view class="gift_tit flex_align_center">
							<image
								src="https://img.jinghushi.com/images/0/2025/04/REoAAJA0CFdayM3dYPQdD0kz0amp3d.png" />
							<view>152</view>
						</view>
					</view>
					<scroll-view :scroll-y="true" class="gift_container">
						<view class="gift_list">
							<view class="gift_item" :class="{'gift_item_ac':item==giftId}" v-for="item in 30"
								@click.stop="selectGift(item)">
								<image
									src="https://img.jinghushi.com/images/0/2025/04/J33jwEQ1MmF6Us3Qrq1BuMSJuQX1Qj.png" />
								<view class="flex_center gift_price">
									<image
										src="https://img.jinghushi.com/images/0/2025/04/REoAAJA0CFdayM3dYPQdD0kz0amp3d.png" />
									<view>100</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="flex_between gift_top">
						<view class="gift_tit flex_align_center">
							<image
								src="https://img.jinghushi.com/images/0/2025/04/REoAAJA0CFdayM3dYPQdD0kz0amp3d.png" />
							<!-- <view>x30</view> -->
						</view>
						<view class="gift_btn">发送</view>
					</view>
				</view>
			</uni-popup>
			<!-- 点赞列表 -->
			<uni-popup ref="likepopup" type="bottom" :animation="true" background-color="#fff">
				<view class="like_content">
					<view class="text-center like_tit">点赞列表</view>
					<scroll-view class="like_list" :scroll-y="true">
						<view class="flex_align_center like_item" v-for="item in likeList">
							<view class="like_num">
								<image
									src="https://img.jinghushi.com/images/0/2025/04/CHq5rb5aHOuNBiHv7afO55IB4xNfir.png"
									mode="widthFix" v-if="item.rank<=3"/>
								<view class="like_num_rank">{{item.rank}}</view>
							</view>
							<image class="like_avatar" :src="item.user_data.avatar"></image>
							<view class="like_info">
								<view class="like_name">{{item.user_data.nickname}}</view>
								<view>本场直播已点赞次数{{item.likes}}次</view>
							</view>
						</view>
					</scroll-view>
					<view class="flex_align_center like_item like_self">
						<view class="like_num">
							{{myLike.rank}}
						</view>
						<image class="like_avatar" :src="myLike.user_data.avatar"></image>
						<view class="like_info">
							<view class="like_name">{{myLike.user_data.nickname}}</view>
							<view>本场直播已点赞次数{{myLike.likes}}次</view>
						</view>
					</view>
				</view>
			</uni-popup>
			<!-- 奖品福袋-待开奖 -->
			<uni-popup ref="awardpopup1" type="bottom" :animation="true" background-color="#ae4afd">
				<view class="award_content">
					<view class="award_tit">
						<view class="award_time">02:09后开奖</view>
					</view>
					<view class="flex_between award_goods">
						<image src="https://img.jinghushi.com/images/9/2024/09/DiGqfE4b34bGBBLB4Q443x4fyK4xKB.jpg">
						</image>
						<view class="award_goods_info">
							<view class="clamp2">金龙鱼大礼包米面油伴手礼五谷杂粮调味品商品一大袋</view>
							<view class="award_goods_num">共一份 97人已参加</view>
							<view class="award_goods_price">参考价值：￥59</view>
						</view>
					</view>
					<view class="award_condition">
						<view class="award_con_tit">参与条件</view>
						<view class="flex_between">
							<view>发送一条弹幕</view>
							<view style="color: #A768FD;">未达成</view>
						</view>
					</view>
					<view class="award_btn">
						<view>去发表评论</view>
					</view>
				</view>
			</uni-popup>
			<!-- 奖品福袋-已开奖 -->
			<uni-popup ref="awardpopup" type="bottom" :animation="true" background-color="#fff">
				<view class="award_content award_content_already">
					<view class="award_al_tit">恭喜抽中福袋</view>
					<view class="award_al_goods">金龙鱼大礼色米面油伴手礼五谷杂粮调味品 大礼包3300g+1350ml </view>
					<image src="https://img.jinghushi.com/images/9/2024/09/DiGqfE4b34bGBBLB4Q443x4fyK4xKB.jpg"></image>
					<view class="award_btn">立即领取奖品</view>
				</view>
			</uni-popup>
			<!-- 输入内容，图片 -->
			<uni-popup ref="inputpopup" type="bottom" :animation="true" background-color="#fff" @change="changeinputPop">
				<view class="inputContent">
					<!-- <view class="flex_between"> -->
						<input type="text" :focus="isFocus" @confirm="sendData" confirm-type="send" placeholder="消费享补贴 就用多米街" v-model="msg" cursor-spacing="40px">
						<!-- <view v-if="msg!=''" class="inputsend">发送</view> -->
					<!-- </view> -->
					<image @click="upload" src="https://img.jinghushi.com/images/0/2025/04/l997cvw1LvVm7hT5fTMvF99ff57HZT.png" mode="widthFix"></image>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		debounce
	} from 'lodash'
	import likeButton from './components/like-button.vue';
	import liveAxios from '@/store/liveBroadcastAjax.js'
	export default {
		components: {
			likeButton
		},
		data() {
			return {
				zanIconList: [
					'https://img.jinghushi.com/images/0/2025/04/tMpwNE0pPHntWSH3NHH27EYNNAe2NH.png',
					'https://img.jinghushi.com/images/0/2025/04/pjG56q5JJ1XzW2inOg2EqorIn1NXzo.png', 
					'https://img.jinghushi.com/images/0/2025/04/BVZmq7t5FZFZVVqV5c1TQyP155v51C.png',
					'https://img.jinghushi.com/images/0/2025/04/WLLkYsEST809tRq65gQQQdk5hOETez.png', 
					'https://img.jinghushi.com/images/0/2025/04/LPWHqBFJqq8bPfVJJj8CJ8jJpFHjYH.png', 
					'https://img.jinghushi.com/images/0/2025/04/Rveq1vozYzjvYgG1v5JoUqw6EoJv7C.png',
					'https://img.jinghushi.com/images/0/2025/04/R1b1A3brR1m81oM1OOMzBXBYhLMamO.png'
				],
				mid: 0,
				likeNumCount: 0,
				windowHeight: uni.getSystemInfoSync().windowHeight, //屏幕高度
				screenWidth: uni.getSystemInfoSync().windowWidth,
				likeNum: 0,
				showHeart: false, //点赞
				goodsList: [], //商品列表
				onlineUsersData: [],
				info: [],
				giftList: [{
					user_name: '这name1',
					price: '10'
				}, {
					user_name: '这name2',
					price: '20'
				}, {
					user_name: '这name3',
					price: '30'
				}, {
					user_name: '这name3',
					price: '40'
				}, {
					user_name: '这name3',
					price: '40'
				}],
				cartData: {
					title: '',
					liveGoodsList: []
				},
				giftId: -1, //选中礼物id
				socketStore: null, //链接
				msg: '', //发送消息
				msgImg: '',//发送图片
				messageList: [],
				status: 4, //弹窗状态
				likeCount: 0, //双击事件
				showLikeIcon: false, //点赞logo
				title: '', //购物车列表搜索条件
				sendGiftData: {
					index: 0,
					price: '',
					Image: ''
				}, //赠送礼物展示数据
				count: 0, //在线人数
				likeList: [], //点赞列表
				myLike: [], //我的点赞,
				liverData: {},
				// socket信息
				ws: null, // socket 对象
				wsUrl: 'ws://47.93.43.172:8282', // 地址
				reconnectNum: 3, // 重连最大次数
				socketState: 'init', // socket 状态 默认初始化 init:初始化 wait:等待响应  connect:连接 close:关闭
				aliveInterval: null, // 心跳定时器
				sendQueue: [], // 发送队列
				room_no: '',
				count: '',
				chatList: [],
				scrollToId: '',
				isSoptBulle: false,
				userInfo: uni.getStorageSync('userInfo') || {},
				_$cartList: [],
				live_pull_url: '',
				anchor: {},
				pushGoodsData: {},
				muteStaus: 0, //0未禁言 1已禁言
				close: false,
				site: ['',''],
				isFocus: false,
				isUpload: false,
			};
		},
		onLoad(options) {
			console.log('onload')
			if (options.mid) {
				uni.setStorageSync('mid', options.mid);
				this.mid = options.mid;
			}
		},
		onShow(){
			console.log(this.isUpload)
			console.log('onshow')
			if (!uni.getStorageSync('token')) {
				this.getToken();
			} else {
				if(!this.isUpload){
					this.liveInfo();
					this.getUserInfo();
					this.getText();
				}
			}
		},
		onHide() {
			console.log(this.isUpload)
			console.log('onhide');
			// 页面隐藏时停止定时器并且断开socket
			if(!this.isUpload){
				this.stopTimer();
				this.disconnectWebSocket();
			}
		},
		onUnload() {
			console.log('onUnload');
			if(!this.isUpload){
				// 页面卸载时停止定时器并且断开socket
				this.stopTimer();
				this.disconnectWebSocket();
			}
		},
		methods: {
			getUserInfo() {
				this.$axios('Center/main', "POST", 'member').then(res => {
					if (res.data.code == 200) {
						uni.setStorageSync('userInfo', res.data.data.member)
					}
				})
			},
			// 直播间信息
			liveInfo() {
				liveAxios('live/getLiveInfo', 'POST', {}).then(res => {
					if (res.code == 0) {
						this.liverData = Object.assign(res.data, {})
						this.room_no = res.data.live_room_no;
						this.live_pull_url = res.data.live_pull_url;
						this.anchor = res.data.anchor;
						if(this.liverData.status==0||this.liverData.status==2){
							uni.showModal({
								title: '提示',
								content: '直播已结束',
								showCancel: false,
								success: res=>{
									if (res.confirm) {
										this.$navBack();
									}
								}
							});
						}else{
							this.enterRoom();
						}
					}
				})
			},
			// 进入直播间
			enterRoom() {
				liveAxios('live/enterRoom', 'POST', {
					live_room_no: this.room_no
				}).then(res => {
					if (res.code == 0) {
						this.likeNumCount = res.data.totalLike;
						if(!this.ws){
							this.initSocket();
						} 
						// this.changClosesStatus();
						this.startTimer();
						if (res.data.menu_status == 1) {
							this.muteStaus = 1;
						}
						if (res.data.push_goods_data.goods_id) {
							this.pushGoodsData = res.data.push_goods_data
						} else {
							this.pushGoodsData = {};
						}
						// else{
						// 	this.initSocket();
						// 	this.startTimer();
						// }
					}
				})
			},
			// 在线用户
			onlineUsers() {
				liveAxios('live/getOnlineUsers', "POST", {
					room_no: this.room_no,
				}).then(res => {
					if (res.code == 0) {
						this.onlineUsersData = res.data;
					}
				})
			},
			// 敏感词列表
			getText() {
				uni.request({
					url: 'https://chat.ceshisss.top/minganci.txt',
					method: 'GET',
					success: (res) => {
						let arr = []
						arr = res.data.split(';')
						this.sensitiveWord = arr.filter(item => item !== '');
					},
					fail: (err) => {
						console.error('读取敏感词文件失败:', err);
					}
				});
			},
			// 启动定时器
			startTimer() {
				this.onlineUsers();
				this.timer = setInterval(() => {
					this.onlineUsers();
				}, 5000);
			},
			// 停止定时器
			stopTimer() {
				clearInterval(this.timer);
			},
			// 打开对应弹窗
			openPopup(type) {
				switch (type) {
					case 'cart':
						this.cartList();
						break;
					case 'gift':
						this.$refs.giftpopup.open();
						break;
					case 'award':
						this.$refs.awardpopup.open();
						break;
					case 'like':
						this.likeRank();
						break;
					case 'input':
						console.log('3333')
						this.isUpload = true;
						this.$refs.inputpopup.open();
						break;
					default:
						return;
				}
			},
			// 选择礼物
			selectGift(id) {
				this.giftId = id;
			},
			handleTouchEnd() {
				this.isSoptBulle = false
			},
			onTouchStart() {
				this.isSoptBulle = true
			},
			// 收藏/取消收藏商品
			changCollectStatus(id, i) {
				let that = this
				this.$axios('favorite/set', "POST", 'shop', {
					id: id
				}).then(res => {
					if (res.data.code == 200) {
						let isfavorite = res.data.data.isfavorite == true ? 0 : 1
						this.cartData.liveGoodsList[i].is_favorite = isfavorite
					}
				})
			},
			// 点赞
			clickThumbsUp(e) {
				this.likeNum++;
				let startDataX = ""
				let startDataY = ""
				if (e.changedTouches) {
					startDataX = e.changedTouches[0].pageX;
					startDataY = e.changedTouches[0].pageY;
				}
				this.site[0] = startDataX - 20;
				this.site[1] = startDataY - 50;
				this.$refs.likeButton.handleClick({
					timeStamp: Date.now()
				});
				this.userLike();
			},
			// 双击点赞
			handleTap(e) {
				let _this = this;
				let curTime = new Date().getTime();
				let lastTime = _this.lastTapDiffTime;
				_this.lastTapDiffTime = curTime;
				//两次点击间隔小于300ms, 认为是双击
				let diff = curTime - lastTime;
				if (diff < 300) {
					this.likeNum++;
					let startDataX = ""
					let startDataY = ""
					if (e.changedTouches) {
						startDataX = e.changedTouches[0].pageX;
						startDataY = e.changedTouches[0].pageY;
					}
					this.site[0] = startDataX;
					this.site[1] = startDataY;
					this.$refs.likeButton.handleClick({
						timeStamp: Date.now()
					});
					this.userLike();
					clearTimeout(_this.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行
				} else {
					// 单击事件延时300毫秒执行
					_this.lastTapTimeoutFunc = setTimeout(function() {
						console.log("单击")
					}, 300);
				}
			},
			// 请求点赞接口
			userLike: debounce(function() {
				liveAxios('live/userLike', "POST", {
					live_room_no: this.room_no,
					like_num: this.likeNum
				}).then(res => {
					if (res.code == 0) {
						this.likeNum = 0;
					}
				})
			}, 5000),
			// 获取点赞排行榜
			likeRank() {
				liveAxios('live/getLikeRank', "POST", {
					live_room_no: this.room_no,
				}).then(res => {
					if (res.code == 0) {
						this.likeList = res.data.top_list
						this.myLike = res.data.my_data
						this.$refs.likepopup.open()
					}
				})
			},
			// 清除商品搜索
			clearCartList() {
				this.cartData.title = '';
				this.cartList();
			},
			// 商品列表
			cartList() {
				this.cartData.liveGoodsList = [];
				let params = {
					live_room_no: this.room_no,
					title: this.cartData.title
				}
				this.$axios('Goodslist/getLiveGoodsList', "POST", 'zhibo', params).then(res => {
					if (res.data.code == 200) {
						this.cartData.liveGoodsList = res.data.data
						this.$refs.cartpopup.open()
					}
				})
			},
			changeinputPop(e){
				setTimeout(()=>{
					if(e.show){
						this.isFocus = true;
					}else{
						this.isFocus = false;
					}
				},50)
				
			},
			// 发送弹幕
			sendData() {
				if (this.muteStaus == 1) {
					return this.$api.msg('您已被禁言');
				}
				if (this.msg) {
					console.log(this.ws)
					// if(this.ws.readyState==1){
						let status = true
						this.sensitiveWord.forEach((item) => {
							if (this.msg.indexOf(item) != -1) {
								status = false;
							}
						})
						if (status == true) {
							this.$refs.inputpopup.close();
							let data = {
								"type": "say",
								"data": {
									"user_id": this.userInfo.id, // 用户名（必填）
									"user_name": this.userInfo.nickname, //用户昵称
									"room_no": this.room_no, // 房间号
									"content": this.msg, // 发言内容
									"msg_type": "1" // 发言信息 1：文字 2：图片
								}
							}
							this.sendWebSocket(data)
						} else {
							uni.showToast({
								title: '请发表正当言论',
								icon: "none",
								duration: 3000
							})
						}
						this.msg = ''
					// }else{
					// 	console.log('连接已关闭')
					// }
				}
			},
			// 发送弹幕图片
			upload() {
				if (this.muteStaus == 1) {
					return this.$api.msg('您已被禁言');
				}
				var that = this;
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.msgImg = res.tempFilePaths[0];
						this.realUpload()
					},
					complete:com=> {
						this.$refs.inputpopup.close();
						this.isUpload = true;
					}
				})
			},
			realUpload(){
				var _this = this;
				uni.uploadFile({
					url: 'https://chat.ceshisss.top/api/upload/uploadImage',
					filePath: _this.msgImg,
					name: 'image',
					header: {
						token: uni.getStorageSync('token')
					},
					formData: {
						'image': 'a'
					},
					success: upres => {
						var res = JSON.parse(upres.data);
						console.log(res)
						if (res.code == 0) {
							let data = {
								"type": "say",
								"data": {
									"user_id": this.userInfo.id, // 用户名（必填）
									"user_name": this.userInfo.nickname, //用户昵称
									"room_no": this.room_no, // 房间号
									"content": res.data.url, // 发言内容
									"msg_type": "2" // 发言信息 1：文字 2：图片
								}
							}
							this.sendWebSocket(data)
						} else {
							this.$api.msg( data.data);
						}
					},
					fail: err => {
						this.$api.msg('上传失败',err);
					},
					complete:com=> {
						this.$refs.inputpopup.close();
						this.isUpload = true;
					}
				})
			},
			prevImg(img){
				var arr = [];
				arr.push(img);
				uni.previewImage({
					current:0,
					urls: arr
				})
			},
			// 用户进入直播间
			getMid() {
				this.$axios('Center/main', "POST", 'member').then(res => {
					if (res.data.code == 200) {
						let data = {
							"type": "login",
							"data": {
								"user_id": res.data.data.member.id,
								"room_no": this.room_no
							}
						}
						this.sendWebSocket(data);
					}
				})
			},
			// socket相关
			sendWebSocket(data) {
				if (this.ws && this.socketState === 'connect') {
					uni.sendSocketMessage({
						data: JSON.stringify(data),
						success: () => {
							this.onlineUsers()
						},
						fail: (err) => {
							console.error('消息发送失败:', err);
						}
					});
				} else {
					console.error('WebSocket未连接或连接已关闭，sendSocketMessage无法发送消息');
					this.reconnectSocket();
				}
			},
			// 初始化socket
			initSocket() {
				this.socketState = 'wait';
				this.ws = uni.connectSocket({
					url: this.wsUrl,
					success: () => {},
					fail: (err) => {
						console.error('WebSocket初始化连接失败:', err);
						this.reconnectSocket();
					}
				});
				uni.onSocketOpen(() => {
					console.log('WebSocket 连接已打开onSocketOpen');
					this.socketState = 'connect';
					this.keepAlive();
					this.getMid();
				});
				uni.onSocketMessage((res) => {
					const data = JSON.parse(res.data);
					console.log('收到消息:', data)
					if (data.type == 'online_update') {
						this.count = data.count;
					} else if (data.type == 'push_goods') {
						this.pushGoodsData = data.data;
					} else if (data.type == 'close_goods') {
						this.pushGoodsData = {};
					} else if (data.type == 'say') {
						data.data.time = new Date * 1;
						if(this.chatList.length>200){
							this.chatList.splice(0,1);
						}
						this.chatList.push(data.data);
						let id = 'id' + this.chatList[this.chatList.length - 1]?.time;
						this.scrollToId = id;
					} else if (data.type == 'mute') {
						if (data.data.user_id == this.userInfo.id) {
							this.muteStaus = 1;
						}
					} else if (data.type == 'unmute') {
						if (data.data.user_id == this.userInfo.id) {
							this.muteStaus = 0;
						}
					}  else if (data.type == 'stop_live') {
						uni.showModal({
							title: '提示',
							content: '直播已结束',
							showCancel: false,
							success: res=> {
								if (res.confirm) {
									this.$navBack();
								}
							}
						});
					} else if(data.type=='total_like'){
						this.likeNumCount = data.data.total_like;
					}
				});
				uni.onSocketClose((e) => {
					this.socketState = 'close';
					console.error("WebSocket 连接关闭onSocketClose",e);
					if(this.close==false){
						this.reconnectSocket();
					}
				});
				uni.onSocketError((e) => {
					console.error('WebSocket 连接错误onSocketError:', e);
					this.reconnectSocket();
				});
			},
			changClosesStatus(){
				this.close=false;
			},
			// 重连websocket
			reconnectSocket(){
				if (this.aliveInterval) {
					clearInterval(this.aliveInterval);
					this.aliveInterval = null;
				}
				console.log("重连中------------------");
				if (this.reconnectNum) {
					this.reconnectNum--;
					setTimeout(() => {
						this.initSocket();
					}, 3000);
				}
			},
			keepAlive() {
				// 定时发送心跳包
				this.aliveInterval = setInterval(() => {
					let data = {
						type: "ping"
					};
					uni.sendSocketMessage({
						data: JSON.stringify(data),
						success: () => {
							console.log('心跳包发送成功');
						},
						fail: (err) => {
							console.error('心跳包发送失败:', err);
						}
					});
				}, 45000);
			},
			disconnectWebSocket() {
				if (this.ws) {
					this.close = true;
					uni.closeSocket({
						success: () => {
							console.error('WebSocket 连接已断开');
							this.socketState = 'close';
							if (this.aliveInterval) {
								clearInterval(this.aliveInterval);
								this.aliveInterval = null;
							}
						},
						fail: (err) => {
							console.error('断开 WebSocket 连接失败:', err);
						}
					});
				} else {
					console.error('WebSocket 未连接，无需断开');
				}
			},
			returnFalse() {
				return false;
			},
			// 自动登录
			getToken() {
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: res => {
						this.$axios('login/autologin', 'POST', 'member', {
							mid: this.mid,
							code: res.code
						}).then(res => {
							if (res.data.code == 200) {
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								this.getInfo();
								this.getSharePath();
								this.liveInfo();
								this.getUserInfo();
								this.getText();
							}
						})
					}
				})
				// #endif
				// #ifdef MP-ALIPAY
				my.getAuthCode({
					scopes: 'auth_base',
					success: res => {
						this.$axios('login/autologinAliPay', 'POST', 'member', {
							mid: this.mid,
							code: res.authCode
						}).then(res => {
							if (res.data.code == 200) {
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								this.getInfo();
								this.getSharePath();
								this.liveInfo();
								this.getUserInfo();
								this.getText();
							}
						})
					}
				})
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.wp {
		width: 100%;
		height: 100%;
	}

	.video {
		width: 100%;
		height: 100%;

		video {
			width: 100%;
			height: 100%;
		}
	}
	.like_Button{
		width: 100%;
		height: 100%;
	}
	.zan_icon {
		position: absolute;
		height: 48px;
		width: 48px;
		animation: piaoxin 1s ease-in infinite;
		z-index: 15;
	}
	.position {
		position: fixed;
		left: 0;
		right: 0;
		margin: auto;
		width: 100%;
		height: 100%;
		top: 0;
	}

	.live_top {
		padding: 0 20rpx;
		position: absolute;
		top: 0;
		padding-top: calc(var(--status-bar-height) + 120rpx);
		width: 100%;

		.live_info {
			align-items: flex-start;
		}

		.live_left {
			max-width: 56%;

			.live_user {
				font-size: 20rpx;
				color: #fff;
				background: rgba(0, 0, 0, .5);
				border-radius: 60rpx;
				padding: 6rpx 22rpx 6rpx 12rpx;

				image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 10rpx;
					border-radius: 50%;
					flex-shrink: 0;
				}

				.live_name {
					width: calc(100% - 50rpx);
				}

				.live_nickname {
					font-size: 24rpx;
				}
			}

			.live_bag {
				width: 66rpx;
				margin-top: 10rpx;
				margin-left: 30rpx;
			}
		}

		.live_right {
			color: #fff;
			font-size: 20rpx;
			padding-top: 16rpx;
			max-width: 40%;

			.live_rank {
				view {
					margin-left: 10rpx;
				}

				.live_rank_avatar {
					width: 60rpx;
					height: 60rpx;
					border: 4rpx solid #f3bb00;
					position: relative;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}

					.live_rank_crown {
						width: 24rpx;
						height: 18rpx;
						position: absolute;
						top: -14rpx;
						transform: rotate(-30deg);
						left: -8rpx;
					}
				}
			}

			.live_icon {
				margin-top: 30rpx;

				view {
					background: rgba(50, 50, 50, .5);
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				button {
					background: transparent;
					padding: 0;
					margin: 0 20rpx;

					&::after {
						border: none;
					}
				}

				image {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
				}
			}
		}
	}

	.live_bottom {
		position: absolute;
		bottom: 20rpx;
		width: 100%;
		padding: 20rpx;

		.l_b_chat {
			width: 400rpx;
			height: 310rpx;
			color: #fff;
			font-size: 24rpx;
			margin-bottom: 30rpx;
			line-height: 40rpx;

			.l_chat_i {
				word-break: break-all;
				image{
					width: 50rpx;
					height: 50rpx;
				}
			}

			text {
				color: orange;
			}
		}

		.l_goods_float {
			position: absolute;
			bottom: 130rpx;
			right: 20rpx;
			background: #fff;
			border-radius: 10rpx;
			padding: 12rpx;
			width: 300rpx;
			overflow: hidden;

			.l_goods_img {
				width: 100%;
				height: 160rpx;
				border-radius: 8rpx;
				overflow: hidden;

				image {
					width: 100%;
				}
			}

			.clamp {
				font-weight: bold;
				font-size: 24rpx;
			}

			.l_goods_rate {
				font-size: 20rpx;
				color: $bg-color;
				margin-top: 2rpx;
			}

			.l_goods_btn {
				margin-top: 10rpx;
				background: #f40606;
				color: #fff;
				font-size: 22rpx;
				text-align: center;
				width: 100%;
				padding: 10rpx 0;
				border-radius: 30rpx;
			}

			.l_goods_num {
				background: #f40606;
				color: #fff;
				font-size: 24rpx;
				position: absolute;
				right: 0;
				top: 0;
				border-bottom-left-radius: 10rpx;
				padding: 4rpx 10rpx;
			}
		}

		.l_b_input {
			border-radius: 10rpx;
			background: rgba(0, 0, 0, .5);
			padding: 2rpx 8rpx;
			height: 70rpx;
			width: 410rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.l_b_mute {
				flex: 1;
				color: #fff;
				font-size: 26rpx;
				padding: 0 10rpx;
				opacity: .6;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: 6rpx;
				}
			}

			input {
				flex: 1;
				color: #fff;
				font-size: 26rpx;
				padding: 0 10rpx;
			}
		}

		.l_b_icon {
			width: 230rpx;

			.l_b_icon_item {
				color: #fff;
				font-size: 20rpx;
				text-align: center;
				margin-left: 30rpx;

				.flex_center {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					background: linear-gradient(180deg, #e102e0 0%, #6900fc 100%);

					image {
						width: 30rpx;
					}
				}
			}
		}
	}

	.cart_content {
		background: rgba(255, 255, 255, .5);
		padding: 30rpx 20rpx 0;
		position: absolute;
		bottom: 0;
		width: 100%;
		transition: all 0.3s;

		.uni-searchbar {
			width: 630rpx;
			padding: 0;

			.uni-searchbar__box {
				justify-content: flex-start;
			}
		}

		.my_order {
			font-size: 22rpx;
			text-align: center;

			image {
				width: 34rpx;
			}
		}

		.cart_list {
			height: 874rpx;

			.cart_item {
				background: #fff;
				border-radius: 8rpx;
				padding: 20rpx;
				margin-top: 16rpx;

				.cart_img {
					width: 200rpx;
					height: 160rpx;
					border-radius: 8rpx;
					overflow: hidden;
					display: flex;
					align-items: center;
					position: relative;
					flex-shrink: 0;

					image {
						width: 100%;
					}

					.cart_num {
						position: absolute;
						right: 0;
						top: 0;
						background: #7250ff;
						color: #fff;
						font-size: 30rpx;
						font-weight: bold;
						border-bottom-left-radius: 30rpx;
						padding: 0 10rpx;
					}
				}

				.cart_info {
					padding-left: 20rpx;
					width: calc(100% - 200rpx);
					.clamp{
						margin-bottom: 10rpx;
					}
					.cart_rate {
						color: #7250ff;
						font-size: 24rpx;
						margin: 10rpx auto 24rpx;
						margin-top: 0;
					}

					.cart_price {
						color: #fe3328;
					}

					.cart_btn {
						text-align: center;
						font-size: 24rpx;
						border-radius: 8rpx;
						background: #bababa;
						color: #fff;
						height: 54rpx;
						overflow: hidden;

						text {
							display: inline-block;
							line-height: 54rpx;
							padding: 0 16rpx;
						}

						.cart_coll {
							border-right: 2rpx solid #fff;
						}

						.cart_coll_ac {
							background: linear-gradient(270deg, #8917E2 0%, #B92DF1 100%);
						}
					}
				}
			}
		}
	}

	.gift_content {
		background: #808080;
		color: #fff;
		position: absolute;
		bottom: 0;
		width: 100%;

		.gift_top {
			padding: 20rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}

		.gift_container {
			height: 374rpx;
		}

		.gift_list {
			border-top: 2rpx solid #4d4d4d;
			border-left: 2rpx solid #4d4d4d;
			border-right: 2rpx solid #4d4d4d;

			.gift_item {
				float: left;
				background: #737373;
				width: 25%;
				height: 186rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-right: 2rpx solid #4d4d4d;
				border-bottom: 2rpx solid #4d4d4d;

				&:nth-child(4n) {
					border-right: none;
				}

				image {
					width: 100rpx;
					height: 100rpx;
				}

				.gift_price {
					margin-top: 10rpx;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}
			}

			.gift_item_ac {
				background: #c5c2d4;
			}
		}

		.gift_btn {
			background: #a90bfe;
			font-size: 28rpx;
			border-radius: 70rpx;
			padding: 14rpx 70rpx;
		}
	}

	.like_content {
		background: #fff;
		color: #333;
		position: relative;
		bottom: 0;
		width: 100%;
		height: 40%;

		.like_tit {
			color: #535152;
			font-weight: bold;
			font-size: 32rpx;
			padding: 20rpx;
		}

		.like_list {
			height: 600rpx;
		}

		.like_item {
			border-bottom: 2rpx solid #eee;
			padding: 20rpx 20rpx 20rpx 0;

			.like_num {
				width: 100rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				image {
					width: 50rpx;
					height: 40rpx;
				}

				.like_num_rank {
					position: absolute;
					left: 0;
					right: 0;
					margin: auto;
					top: 0;
					bottom: 0;
					text-align: center;
					padding-top: 30rpx;
					font-size: 20rpx;
					font-weight: bold;
					color:#9C5A07;
				}
			}

			.like_avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.like_info {
				font-size: 22rpx;

				.like_name {
					font-weight: bold;
					font-size: 28rpx;
				}
			}
		}

		.like_self {
			position: absolute;
			bottom: 0;
			width: 100%;
		}
	}

	.award_content {
		background: linear-gradient(180deg, #ff4ced 0%, #ae4afd 100%);
		color: #333;
		position: absolute;
		bottom: 0;
		width: 100%;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 20rpx;

		.award_tit {
			text-align: center;

			.award_time {
				color: #fff;
				margin-bottom: 20rpx;
			}
		}

		.award_goods {
			background: #fff;
			padding: 10rpx;
			border-radius: 10rpx;

			image {
				width: 222rpx;
				height: 161rpx;
				flex-shrink: 0;
				border-radius: 8rpx;
			}

			.award_goods_info {
				color: #994CFD;
				padding-left: 16rpx;
				display: flex;
				flex-direction: column;

				// margin-left: 16rpx;
				// border-left: 2rpx solid #9A4CFD;
				.award_goods_num {
					font-size: 20rpx;
					border-radius: 6rpx;
					border: 2rpx solid #9A4CFD;
					padding: 2rpx 4rpx;
					margin: 10rpx 0 6rpx;
					align-self: baseline;
				}

				.award_goods_price {
					font-weight: bold;
					font-size: 24rpx;
				}
			}
		}

		.award_condition {
			margin-top: 20rpx;
			background: #fff;
			border-radius: 8rpx;
			padding: 14rpx 30rpx;
			color: #535353;
			font-size: 22rpx;

			.award_con_tit {
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 16rpx;
			}
		}

		.award_btn {
			background-color: #fff;
			font-weight: bold;
			font-size: 32rpx;
			letter-spacing: 10rpx;
			margin-top: 20rpx;
			border-radius: 4rpx;
			padding: 18rpx 0;
			border-radius: 8px;

			view {
				background: linear-gradient(180deg, #F88D07 0%, #EA02DD 30%, #6900FC 100%);
				-webkit-background-clip: text;
				color: transparent;
				text-align: center;
			}
		}

	}

	.award_content_already {
		background: #fff;
		text-align: center;

		.award_al_tit {
			background: linear-gradient(180deg, #F88D07 0%, #EA02DD 30%, #6900FC 100%);
			-webkit-background-clip: text;
			color: transparent;
			text-align: center;
			font-size: 32rpx;
			letter-spacing: 10rpx;
			font-weight: bold;
			margin-top: 20rpx;
		}

		.award_al_goods {
			color: #9D9C9D;
			font-size: 26rpx;
			margin: 20rpx 0;
		}

		image {
			width: 222rpx;
			height: 161rpx;
			border-radius: 8rpx;
		}

		.award_btn {
			background: linear-gradient(3deg, #964cfd 0%, #f04de7 100%);
			color: #fff;
		}
	}
	
	.inputContent{
		padding: 20rpx 20rpx 0;
		.inputsend{
			background: $bg-color;
			border-radius: 30rpx;
			color: #fff;
			padding: 6rpx 20rpx;
		}
		input{
			background: #eee;
			padding: 0 20rpx;
			border-radius: 30rpx;
			height: 60rpx;
		}
		image{
			margin-top: 20rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>